<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <p slot="title">个人标签</p>
            <Button class="ivu-mb-16" type="primary" ghost icon="md-add" @click="edittag(true)">添加标签</Button>
            <!-- <Tag class="ivu-mr" v-for="item of selflist" :key="item.id" type="dot" closable checkable color="primary" @on-change="edittag(true,item)" @on-close="deletetag(true,item)">{{`${item.tags_name}(${item.cnt})`}}</Tag> -->
            <draggable v-model="selflist" @update="changselfUpdate">
                <transition-group>
                    <Tag class="ivu-mr" v-for="item of selflist" :key="item.id" type="dot" closable checkable color="primary" @on-change="edittag(true,item)" @on-close="deletetag(true,item)">{{`${item.tags_name}(${item.cnt})`}}</Tag>
                </transition-group>
            </draggable>


        </Card>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <p slot="title">部门标签</p>
            <Button class="ivu-mb-16" type="primary" v-if="create" ghost icon="md-add" @click="edittag(false)">添加标签</Button>
            <draggable v-model="projectlist" @update="changprojectUpdate">
                <transition-group>
                    <Tag  class="ivu-mr" v-for="item of projectlist" :key="item.id" type="dot" :closable="deletes" :checkable="update" @on-change="edittag(false,item)" @on-close="deletetag(false,item)">{{`${item.tags_name}(${item.cnt})`}}</Tag>
                </transition-group>
            </draggable>
            <!-- <template v-for="item of projectlist">
                <Tag v-if="item.project_id == 0" class="ivu-mr" :key="item.id" type="dot">{{`${item.tags_name}(${item.cnt})`}}</Tag>
                <Tag v-else class="ivu-mr" :key="item.id" type="dot" :closable="deletes" :checkable="update" @on-change="edittag(false,item)" @on-close="deletetag(false,item)">{{`${item.tags_name}(${item.cnt})`}}</Tag>
            </template> -->
        </Card>
        <Modal v-model="modal" :title="`${edit?'新增':'编辑'}${self?'个人':'部门'}标签`" @on-cancel="cancel('editmodal')">
            <Form ref="editmodal" :model="editparams" :rules="Rules">
                <FormItem prop="tags_name">
                    <Input v-model="editparams.tags_name" type="text"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancel('editmodal')">取消</Button>
                <Button type="primary" :loading="subloading" @click="submit('editmodal')" >确定</Button >
            </div>
        </Modal>
        <Modal v-model="delmodal" :title="`删除标签`" @on-cancel="delcancel()">
            <h3>删除<font color="#ed4014">{{editparams.tags_name}}</font>标签，<font color="#ed4014">会删除</font>已标记的患者标签！</h3>
            <div slot="footer">
                <Button @click="delcancel()">取消</Button>
                <Button type="primary" :loading="subloading" @click="delsubmit()" >确定</Button >
            </div>
        </Modal>
    </div>
</template>

<script>
    import {
        basetagsselflist, basetagsselfcreate, basetagsselfupdate, basetagsselfdelete,
        basetagsprojectlist, basetagsprojectcreate, basetagsprojectupdate, basetagsprojectdelete, basetagsfindtagsmember,selftagsSort,projecttagsSort
    } from '@/api/hqapi/tags';
    import util from '@/libs/util';
    import draggable from 'vuedraggable';
    export default {
        components: {draggable },
        name: 'diagnosis',
        data() {
            return {
                selfparams: { member_id: util.cookies.get('uuid'), page: 0, pageSize: 0},
                projectparams: { page: 0, pageSize: 0},
                editparams: { tags_name: '', id: 0 },
                deleteparams: { id: '' },
                Rules: {
                    tags_name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                },
                delmodal: false,
                modal: false,
                edit: true,
                self: true,
                subloading: false,
                selflist: [],
                projectlist: [],
                btnShow: {
                    create: { name: '-v1-base-tags-project-create', flag: '/v1/base/tags/project-create', },
                    update: { name: '-v1-base-tags-project-update', flag: '/v1/base/tags/project-update', },
                    delete: { name: '-v1-base-tags-project-delete', flag: '/v1/base/tags/project-delete', },
                },
                create: false,
                update: false,
                deletes: false,
            };
        },
        mounted() {
            let arr = JSON.parse(localStorage.getItem('menus')).action;
            arr.find(item => {
                if (item.flag == this.btnShow.create.flag && item.marking == this.btnShow.create.name) this.create = true;
                if (item.flag == this.btnShow.update.flag && item.marking == this.btnShow.update.name) this.update = true;
                if (item.flag == this.btnShow.delete.flag && item.marking == this.btnShow.delete.name) this.deletes = true;
            });
            this.initial();
        },
        methods: {
            changselfUpdate({newDraggableIndex}){
                selftagsSort({id_sort: this.selflist}).then(res => {
                    this.$Message.success('排序成功');
                });
                // console.log(newDraggableIndex,'to');
            },
            changprojectUpdate(){
                projecttagsSort({id_sort: this.projectlist}).then(res => {
                    this.$Message.success('排序成功');
                });
            },
            initial() {
                this.selfaskData();
                this.projectaskData();
            },
            selfaskData() {
                basetagsselflist(this.selfparams).then(res => {
                    this.selflist = res.list;
                });
            },
            projectaskData () {
                basetagsprojectlist(this.projectparams).then(res => {
                    this.projectlist = res.list;
                });
            },
            edittag(bool,item){
                if(item) {
                    this.edit = false;
                    this.editparams = { tags_name: item.tags_name, id: item.id };
                } else {
                    this.edit = true;
                    this.editparams = { tags_name: '', id: 0 };
                }
                this.self = bool;
                this.modal = true;
            },
            deletetag(bool,item){
                this.self = bool;
                this.editparams = { tags_name: item.tags_name, id: item.id };
                this.delmodal = true;
            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.logs();
                        this.subloading = true;
                        if (this.self) {
                            if (this.edit) {
                                basetagsselfcreate({tags_name: this.editparams.tags_name}).then(() => {
                                    this.submessage(true);
                                }).catch(() => {
                                    this.submessage(false);
                                });
                            } else {
                                basetagsselfupdate({tags_name: this.editparams.tags_name, id: this.editparams.id}).then(() => {
                                    this.submessage(true);
                                }).catch(() => {
                                    this.submessage(false);
                                });
                            }
                        } else {
                            basetagsfindtagsmember({tags_name: this.editparams.tags_name}).then(res => {
                                if (res.member_name.length > 0) {
                                    this.$Modal.confirm({
                                        title: '温馨提示',
                                        content: `<p>该标签与<font color="#ed4014">${res.member_name.join(',')}</font>的个人标签重复，确定后会同步改成部门标签。</p>`,
                                        onOk: () => {
                                            if (this.edit) {
                                                basetagsprojectcreate({tags_name: this.editparams.tags_name}).then(() => {
                                                    this.submessage(true);
                                                }).catch(() => {
                                                    this.submessage(false);
                                                });
                                            } else {
                                                basetagsprojectupdate({tags_name: this.editparams.tags_name, id: this.editparams.id}).then(() => {
                                                    this.submessage(true);
                                                }).catch(() => {
                                                    this.submessage(false);
                                                });
                                            }
                                        },
                                        onCancel: () => {
                                            this.subloading = false;
                                        }
                                    });
                                } else {
                                    if (this.edit) {
                                        basetagsprojectcreate({tags_name: this.editparams.tags_name}).then(() => {
                                            this.submessage(true);
                                        }).catch(() => {
                                            this.submessage(false);
                                        });
                                    } else {
                                        basetagsprojectupdate({tags_name: this.editparams.tags_name, id: this.editparams.id}).then(() => {
                                            this.submessage(true);
                                        }).catch(() => {
                                            this.submessage(false);
                                        });
                                    }

                                }
                            });
                        }
                    }
                });
            },
            submessage(bool) { 
                if (bool){ 
                    this.$Message.success(`${this.edit ? '新增' : '编辑'}${this.self ? '个人' : '部门'}标签成功`);
                    if (this.self) this.selfaskData();
                    else {
                        this.projectaskData();
                        this.selfaskData();
                    }
                    this.modal = false;
                }
                this.subloading = false;
            },
            cancel(name) { 
                this.$refs[name].resetFields();
                this.modal = false;
            },
            delsubmit() {
                if (this.self) {
                    basetagsselfdelete({id: this.editparams.id}).then(() => {
                        this.delmessage(true);
                    }).catch(() => {
                        this.delmessage(false);
                    });
                } else {
                    basetagsprojectdelete({id: this.editparams.id}).then(() => {
                        this.delmessage(true);
                    }).catch(() => {
                        this.delmessage(false);
                    });
                }
            },
            delmessage(bool) { 
                if (bool){ 
                    this.$Message.success(`删除${this.self ? '个人' : '部门'}标签成功`);
                    this.delmodal = false;
                    if (this.self) this.selfaskData();
                    else this.projectaskData(); 
                }
                this.subloading = false;
            },
            delcancel() {
 this.delmodal = false; 
},
        },
    };
</script>
<style lang="less" scoped>
/deep/.ivu-tag-dot-inner{
    display: none;
}
</style>